AMP (Accelerated Mobile Pages) এবং PWA (Progressive Web Apps) দুটি গুরুত্বপূর্ণ প্রযুক্তি যা মোবাইল ওয়েব পেজের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে। যখন এই দুটি প্রযুক্তি একত্রিত হয়, তখন ওয়েব পেজটি আরো দ্রুত লোড হয় এবং অফলাইন ব্যবহারের সুবিধা পাওয়া যায়। AMP এবং PWA একত্রিত করার মাধ্যমে আপনি একটি দ্রুত লোডিং, অফলাইন সাপোর্ট, বিরামহীন অ্যাপ্লিকেশন এক্সপেরিয়েন্স প্রদান করতে পারবেন।
এখানে AMP পেজকে PWA এর সাথে একত্রিত করার পদ্ধতি এবং ধাপগুলো দেওয়া হলো:
AMP পেজকে PWA এর সাথে একত্রিত করার পদক্ষেপ
AMP পেজ তৈরি করুন
- প্রথমে একটি সাধারণ AMP পেজ তৈরি করুন। এটি হল পেজের একটি বেসিক কাঠামো, যেখানে AMP কম্পোনেন্ট এবং ট্যাগগুলি ব্যবহার করা হবে।
উদাহরণ:
<!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AMP with PWA</title> <script async src="https://cdn.ampproject.org/v0.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> <style amp-custom> body { font-family: Roboto, sans-serif; } </style> </head> <body> <h1>Welcome to AMP with PWA</h1> <amp-img src="image.jpg" width="600" height="400" alt="description" layout="responsive"></amp-img> </body> </html>PWA মেনিফেস্ট ফাইল তৈরি করুন
- PWA মেনিফেস্ট ফাইল হল একটি JSON ফাইল যা ওয়েব অ্যাপ্লিকেশনটির জন্য তথ্য প্রদান করে, যেমন অ্যাপের নাম, আইকন, রং, লোডিং স্ক্রিন ইত্যাদি। এটি PWA এর জন্য বাধ্যতামূলক একটি উপাদান।
একটি উদাহরণ মেনিফেস্ট ফাইল:
{ "name": "AMP with PWA", "short_name": "AMP PWA", "description": "An AMP page combined with PWA capabilities.", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "icons": [ { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" } ] }এই ফাইলটিকে আপনার ওয়েবসাইটের রুট ডিরেক্টরিতে
manifest.jsonনামে সংরক্ষণ করুন এবং HTML ফাইলের হেড সেকশনে সংযুক্ত করুন:<link rel="manifest" href="manifest.json">
Service Worker যুক্ত করুন
- PWA এর একটি গুরুত্বপূর্ণ অংশ হল Service Worker, যা ব্রাউজারের জন্য অফলাইন সাপোর্ট এবং পুশ নোটিফিকেশন সংক্রান্ত কাজ করে। Service Worker সাইটের রিকোয়েস্টগুলো ক্যাশ করতে পারে এবং অফলাইন অবস্থায় সাইট অ্যাক্সেসের সুবিধা দেয়।
Service Worker স্ক্রিপ্টের একটি উদাহরণ:
// service-worker.js self.addEventListener('install', (event) => { event.waitUntil( caches.open('AMP-PWA-Cache').then((cache) => { return cache.addAll([ '/', '/index.html', '/manifest.json', '/styles.css', '/scripts.js', '/images/image.jpg', ]); }) ); }); self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((cachedResponse) => { return cachedResponse || fetch(event.request); }) ); });এরপর, এই Service Worker স্ক্রিপ্টটি HTML ফাইলে নিবন্ধন করুন:
<script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(function(registration) { console.log('Service Worker registered with scope:', registration.scope); }) .catch(function(error) { console.log('Service Worker registration failed:', error); }); } </script>
- AMP পেজে Service Worker এবং Manifest সমর্থন
- AMP পেজের সাথে PWA সমর্থন নিশ্চিত করার জন্য আপনার AMP পেজে
service-workerএবংmanifestফাইল সঠিকভাবে যুক্ত করতে হবে। AMP পেজে PWA সক্ষম করার জন্যmanifest.jsonএবংservice-worker.jsএর সঠিক পথে সংযুক্ত করা গুরুত্বপূর্ণ। manifest.jsonফাইলটিকে হেড সেকশনে এইভাবে সংযুক্ত করুন:<link rel="manifest" href="/manifest.json">
- AMP পেজের সাথে PWA সমর্থন নিশ্চিত করার জন্য আপনার AMP পেজে
- AMP পেজে অ্যাডিশনাল PWA ফিচার ব্যবহার করুন
AMP পেজের মধ্যে Push Notifications, Background Sync এবং অন্যান্য PWA ফিচার ব্যবহার করার জন্য আপনাকে Service Worker কোডে অতিরিক্ত ফিচার যোগ করতে হবে। উদাহরণস্বরূপ, Push Notifications এর জন্য উপযুক্ত কোড যুক্ত করতে হবে:
self.addEventListener('push', function(event) { const options = { body: event.data.text(), icon: '/icons/icon-192x192.png', badge: '/icons/badge-72x72.png' }; event.waitUntil( self.registration.showNotification('New Push Notification', options) ); });
- PWA ফিচারগুলি টেস্ট করুন
- সবকিছু সেটআপ হওয়ার পর, আপনার PWA অ্যাপের কার্যকারিতা টেস্ট করা গুরুত্বপূর্ণ। Lighthouse টুল বা Chrome DevTools ব্যবহার করে আপনি সহজেই আপনার PWA ফিচারটি পরীক্ষা করতে পারেন।
- Lighthouse টেস্টে পিডব্লিউএ এর সঠিক কার্যকারিতা, সঠিক ক্যাশিং, অফলাইন মোড, এবং অন্যান্য ফিচারের ফলাফল দেখতে পাবেন।
AMP পেজকে PWA এর সাথে একত্রিত করার সুবিধা
- দ্রুত লোডিং এবং অফলাইন সাপোর্ট:
- AMP পেজের দ্রুত লোডিং সুবিধা এবং PWA এর অফলাইন সাপোর্ট একত্রিত হলে, ব্যবহারকারীরা যেকোনো অবস্থায় দ্রুত এবং সুবিধাজনক অভিজ্ঞতা পাবেন।
- Push Notifications:
- PWA এর মাধ্যমে ব্যবহারকারীদের push notifications পাঠানো সম্ভব, যা ব্যবহারকারীদের সাথে আরও ভালো যোগাযোগ করতে সাহায্য করে।
- অভিজ্ঞতা উন্নত করা:
- AMP পেজের পারফরম্যান্স উন্নত করার জন্য PWA এর সাথে একত্রিত করলে ব্যবহারকারীদের একটি নেটিভ অ্যাপ্লিকেশনের মতো অভিজ্ঞতা পাওয়া যায়।
- ব্যান্ডউইথ সাশ্রয়:
- AMP পেজের ক্যাশিং এবং PWA এর সেবা ব্যবহারকারীর ব্যান্ডউইথ সাশ্রয় করতে সহায়তা করে।
- সার্চ ইঞ্জিন র্যাঙ্কিং উন্নতি:
- AMP পেজ এবং PWA এর সমন্বয়ে ওয়েবসাইট দ্রুত লোড হওয়ায় সার্চ ইঞ্জিনে ভালো র্যাঙ্ক পেতে সহায়তা করে।
সারাংশ
AMP এবং PWA একত্রিত করার মাধ্যমে আপনি একটি দ্রুত লোডিং, অফলাইন সাপোর্টেড, এবং অ্যাপের মতো অভিজ্ঞতা প্রদান করতে পারেন। AMP দ্বারা পেজ লোড দ্রুত হয়, এবং PWA দ্বারা ব্যবহারকারীদের অফলাইন মোড এবং পুশ নোটিফিকেশন সাপোর্ট পাওয়া যায়। একত্রিত করলে, আপনি একটি পূর্ণাঙ্গ, উন্নত ওয়েব অভিজ্ঞতা তৈরি করতে পারবেন।
Read more
